<template>
    <div style="display: flex;">
        <a-form
            name="basic"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            style="width: 500px; margin-top: 30px;"
        >
            <a-form-item
                label="剧本名"
                name="name"
            >
                <div>{{name}}</div>
            </a-form-item>
            <a-form-item
                label="剧本描述"
                name="description"
                :rules="[{ required: true, message: '请输入剧本名称' }]"
            >
                <a-textarea v-model:value="description" disabled show-count />
            </a-form-item>
            <a-form-item label="标签" name="labelIds">
                <a-select
                    v-model:value="labelsSelected"
                    mode="multiple"
                    style="width: 100%"
                    placeholder="选择标签"
                    disabled
                >
                </a-select>
            </a-form-item>
        </a-form>
        <div style="margin-left: 100px; margin-top: 30px;">
            <a-spin :spinning="spinning">
                <embed :src="content" type="application/pdf" width="800px" height="740px" />
            </a-spin>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: 'ScriptsComponent',
}
</script>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { getScriptById } from '../../api/scripts_api';
import axios from 'axios';

const props = defineProps(['id'])
const name = ref<string>('')
const description = ref<string>('')
const labelsSelected = ref<string[]>([])
const content = ref<string>("")
const spinning = ref<boolean>(true)

onMounted(async () => {
  // 请求script数据
    await getScriptById(props.id)
    .then(async resp => {
        name.value = resp.data.name
        description.value = resp.data.description
        labelsSelected.value = resp.data.labelNames
        await setTimeout( async () => {
            const response = await axios.get(resp.data.contentUrl, { responseType: 'blob' });
            const blob: Blob = new Blob([response.data], { type: 'application/pdf' });
            const pdfUrlObject: string = URL.createObjectURL(blob);
            content.value = pdfUrlObject
            spinning.value = false
        }, 2000);
    })
    .catch(errpr => {})
  
});

function loadPDF(url:string) {
    const pdfUrl = url;
    const pdfContainer =ref<HTMLDivElement>()
    const embed = document.createElement('embed');
    embed.src = pdfUrl;
    embed.width = '100%';
    embed.height = '100%';
    pdfContainer.value?.appendChild(embed);
};
</script>

<style scoped>
</style>